import React, { useEffect } from 'react';

import { Form, Row, Select } from 'antd';
import styled from '@emotion/styled';
const { Option } = Select;

import { getFormList } from '@/api';
import { useBusiness } from '../Context/BusinessContext';
import useSyncState from '../hooks/useSyncState';
import AgentService from '@/modules/Agent';
import { useTranslation } from 'react-i18next';

export interface IFormOption {
	formTemplate: { id: number; name: string; fields: any };
	scenId: number;
}

interface ISendFormProps {
	getFormTemplate: (formTemplate?: IFormOption[]) => void;
	form: any;
}

const SendFormContainer = styled.div`
	width: '100%;';
`;

const FormSelect = styled(Select)`
	.ant-select-selector {
		max-height: 90px;
		overflow-y: auto;
		background-color: #f6f6f6 !important;
	}
	.ant-select-selection-placeholder {
		line-height: 40px !important;
	}
	.ant-select-selection-item {
	}

	input {
		height: 40px !important;
	}
`;

const SendForm = (props: ISendFormProps) => {
	const { t } = useTranslation();
	const { getFormTemplate, form } = props;
	console.log('getFormTemplate:', form);

	const { bizScenarioId } = useBusiness();
	const [formOptions, setFormOptions] = useSyncState<IFormOption[]>([]);

	const handleChange = (value: number[]) => {
		let formList: IFormOption[] = [];
		value.forEach(v => {
			const form = formOptions().find(k => k.formTemplate.id === v);
			if (form) {
				formList = [...formList, form];
			}
		});

		getFormTemplate(formList);
	};

	useEffect(() => {
		console.log(AgentService.userData);

		if (AgentService.userData?.service) {
			getFormList(AgentService.userData?.service)
				.then(resp => {
					console.log('getFormList:', resp);
					if (resp.status === 200 && resp.data.result) {
						setFormOptions(resp.data.result);
					}
				})
				.catch(e => {
					console.log(e);
				});
		}

		if (AgentService.bizScenarioId) {
			getFormList(AgentService.bizScenarioId)
				.then(resp => {
					console.log('getFormList:', resp);
					if (resp.status === 200 && resp.data.result) {
						setFormOptions(resp.data.result);
					}
				})
				.catch(e => {
					console.log(e);
				});
		}
	}, [AgentService.userData, AgentService.bizScenarioId]);
	return (
		<SendFormContainer>
			{/* <TitleContianer>推送表单</TitleContianer> */}
			<Form ref={form}>
				<Form.Item name="id" rules={[{ required: true, message: t('select-form-to-push') as string }]}>
					<FormSelect
						getPopupContainer={triggerNode => {
							return triggerNode.parentNode;
						}}
						notFoundContent={t('no-form-to-push')}
						optionFilterProp="children"
						style={{ width: '100%', height: '40px' }}
						allowClear
						mode="multiple"
						placeholder={t('select-form-to-push')}
						onChange={handleChange}
					>
						{formOptions().map(option => {
							return (
								<Option value={option.formTemplate.id} key={option.formTemplate.id}>
									{option.formTemplate.name}
								</Option>
							);
						})}
					</FormSelect>
				</Form.Item>
			</Form>
		</SendFormContainer>
	);
};

export default SendForm;
